<template>
	<div class="product-detail-page">
		<!-- 商品图片轮播 -->
		<van-swipe class="product-swipe" :autoplay="3000">
			<van-swipe-item v-for="(img, index) in productImages" :key="index">
				<img :src="img" class="swipe-image" />
			</van-swipe-item>
		</van-swipe>
		<!-- 商品基本信息 -->
		<div class="product-info">
			<div class="price-row">
				<span class="price">¥{{ product.price }}</span>
				<span class="sales">已售9999+</span>
			</div>
			<h1 class="title">{{ product.productName }}</h1>
			<van-tag type="danger" class="tag">文创商品</van-tag>
		</div>
		<!-- 商品描述 -->
		<van-cell title="商品描述" class="desc-title" />
		<div class="description">
			{{ product.description }}
		</div>
		<!-- 底部操作栏 -->
		<van-action-bar>
			<van-action-bar-icon icon="chat-o" text="客服" @click="contactService" />
			<van-action-bar-icon icon="cart-o" text="购物车" :badge="cartCount" @click="goToCart()" />
			<van-action-bar-button type="warning" text="加入购物车" @click="addToCart" />
			<van-action-bar-button type="danger" text="立即购买" @click="buyNow" />
		</van-action-bar>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		Swipe,
		SwipeItem,
		Tag,
		Cell,
		ActionBar,
		ActionBarIcon,
		ActionBarButton,
		showToast
	} from 'vant';
	import {getCreateProducts} from '@/apis/products'
	import { useRouter, useRoute } from 'vue-router' //传入路由
	
	const router = useRouter()
	const route = useRoute()
	// 商品数据
	const product = ref({});//商品数据
	const productImages = ref([]);//商品图片
	const cartCount = ref(0);// 购物车数量
	
	// 根据分类ID获取商品列表
	const getCreateProductsByid = () => {
	    let id = route.query.id
	    getCreateProducts(id).then(res =>{
	        if (res.code === 0 && res.data) {
	            product.value = res.data[0];
	            productImages.value = [product.value.cover];
	        } else {
	           
	        }
	    })
	};
	
	// 客服联系
	const contactService = () => {
		showToast('功能还在研发中...');
	};

	// 前往购物车
	const goToCart = () => {
		showToast('跳转购物车');
	};

	// 加入购物车
	const addToCart = () => {
		cartCount.value += 1;
	};

	// 立即购买
	const buyNow = () => {
		showToast("立即购买");
	};

	onMounted(() => {
		getCreateProductsByid()//初始化数据
	});
</script>

<style scoped>
	.product-detail-page {
		padding-bottom: 50px;
		background-color: #f7f8fa;
		min-height: 100vh;
	}

	.product-swipe {
		height: 375px;
		background-color: #fff;
	}

	.swipe-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product-info {
		padding: 15px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.price {
		font-size: 24px;
		color: #ee0a24;
		font-weight: bold;
	}

	.sales {
		font-size: 12px;
		color: #969799;
	}

	.title {
		font-size: 16px;
		margin: 0 0 10px;
		line-height: 1.4;
	}

	.tag {
		margin-right: 8px;
	}

	.desc-title {
		margin-top: 10px;
	}

	.description {
		padding: 15px;
		background-color: #fff;
		font-size: 14px;
		line-height: 1.6;
		color: #333;
		white-space: pre-line;
	}
</style>